<script setup>
import { ref,watch } from 'vue';
import axios from 'axios';
import * as echarts from "echarts";
import {onMounted, onUnmounted} from "vue";

const shiwenImageUrl = ref(null);
// const baseUrl3 = 'E:/Project/DigitalTwinPic/waiya/';
const baseUrl3 = 'http://115.24.173.26:8002/DigitalTwinPic/waiya/';
const stuNo = sessionStorage.getItem("stuNo").replace(/"/g, "");
console.log(stuNo);
let length1 = ref(0);
let length2 = ref(0);
let length3 = ref(0);
let avelength = ref(0);
let outerMax1 = ref(0);
let outerMax2 = ref(0);
let outerMax3 = ref(0);
let aveoutermax = ref(0);
let outerMin1 = ref(0);
let outerMin2 = ref(0);
let outerMin3 = ref(0);
let aveoutermin = ref(0);
let wallThick1 = ref(0);
let wallThick2 = ref(0);
let wallThick3 = ref(0);
let avewallThick = ref(0);
let initDefect1 = ref(0);
let initDefect2 = ref(0);
let initDefect3 = ref(0);
let aveinitdefect = ref(0);
// let previousPress = ref(0);
let press = ref(0.01);
let maxPress = ref(0.01);
// let temp = ref(0.01)
let flag = ref(0)
let d = 1;
let p = 1;
let n = 0;
let yAxisData = [
  0.10000E-01, 0.20000E-01, 0.34385E-01, 0.54776E-01, 0.80976E-01, 0.10891, 0.12674,
  0.13829, 0.14622, 0.15209, 0.15659, 0.16015, 0.16303, 0.16541, 0.16741, 0.16910,
  0.17056, 0.17182, 0.17293, 0.17391, 0.17477, 0.17554, 0.17623, 0.17685, 0.17741,
  0.17792, 0.17838, 0.17879, 0.17918, 0.17952, 0.17984, 0.18013, 0.18040, 0.18064,
  0.18086, 0.18107, 0.18125, 0.18142, 0.18158, 0.18172, 0.18185, 0.18196, 0.18207,
  0.18216, 0.18225, 0.18232, 0.18238, 0.18244, 0.18249, 0.18253, 0.18256, 0.18259,
  0.18261, 0.18262, 0.18263, 0.18263
];

let xAxisData = [
  0.237272E-003, 0.560075E-003, 0.120519E-002, 0.244178E-002, 0.503056E-002, 0.101069E-001,
  0.160239E-001, 0.221757E-001, 0.283350E-001, 0.345631E-001, 0.408297E-001, 0.471164E-001,
  0.534125E-001, 0.597112E-001, 0.660082E-001, 0.723005E-001, 0.785860E-001, 0.848631E-001,
  0.911307E-001, 0.973879E-001, 0.103634, 0.109869, 0.116091, 0.122301, 0.128498, 0.134683,
  0.140854, 0.147012, 0.153157, 0.159288, 0.165406, 0.171509, 0.177599, 0.183676, 0.189738,
  0.195786, 0.201820, 0.207841, 0.213847, 0.219839, 0.225816, 0.231780, 0.237730, 0.243665,
  0.249586, 0.255493, 0.261385, 0.267264, 0.273128, 0.278977, 0.284813, 0.290634, 0.296441,
  0.302233, 0.308011, 0.313775
];
let pressValues = [0.10000E-01]; // 初始两个 press 值
let chartData = []; // 存储图表数据
let lineChart = null;
let motaiImageUrl = ref(null); // 使用 ref 来创建响应式数据


const waiyaCompute1 = () => {
  var data = new FormData();
  data.append('usr', 'HBGYDX');
  data.append('pwd', '123456');
  data.append('id', '627');


  // HUAWEI-1CRGC6
  // 1qaz2wsx

  var config = {
    method: 'post',
    url: '/cgi/data.php',
    headers: {
      // 'Content-Type' 应该不需要手动设置，因为 axios 会自动处理 FormData
      // 'Content-Type': 'multipart/form-data; boundary=--------------------------658559184002131110438280',
    },
    data: data
  };

  axios(config)
      .then(function (response) {
        // 将获取到的压力数据保留两位小数
        const pressureData = response.data.data[0].d1;
        press.value = parseFloat(pressureData).toFixed(2);
        updateChart();
      })
      .catch(function (error) {
        console.log(error);
      });
}
const getRandomPress = () => {
  if(!flag.value){
    press.value = (Number(press.value) + 0.01).toFixed(2);
    if(maxPress.value<press.value){
      maxPress.value = press.value;
    }
    if (Math.abs(press.value - 0.21) < 0.000001) {
    press.value =0.01
  }
  }
  else {
    waiyaCompute1();

    // 初始化 maxPress.value 为保留两位小数的字符串
    maxPress.value = "0.00";

    // 确保 waiyaCompute1 完成后再进行比较
    setTimeout(() => {
      if (parseFloat(maxPress.value) < parseFloat(press.value)) {
        maxPress.value = parseFloat(press.value).toFixed(2);
      }
      console.log("press.value:", parseFloat(press.value).toFixed(2));
      console.log("maxPress.value:", maxPress.value);
    }, 10); // 使用 setTimeout 确保 waiyaCompute1 完成
  }
};

setInterval(getRandomPress, 5000);

const getWaiyaParams = async()=>{
  await axios.post('/api/student/getWaiyaParams', { stuNo: stuNo })
    .then((response) => {
      setWaiyaParams(response)
      pressValues = [];
      _pressValue = []
      chartData = [];
    })
}

/**
 * #3
 * @returns {Promise<void>}
 */
const getWaiyaRandomParams = async()=>{
  await axios.post('/api/student/getWaiyaRandomParams', { stuNo: stuNo })
    .then((response) => {
      setWaiyaParams(response)
    })
}

/**
 * #3
 * @param response
 */
function setWaiyaParams(response) {
  if (response.data.code === 1) {
    console.log(response.data);
    length1.value=response.data.data.length1;
    length2.value=response.data.data.length2;
    length3.value=response.data.data.length3;
    outerMax1.value=response.data.data.outerMax1;
    outerMax2.value=response.data.data.outerMax2;
    outerMax3.value=response.data.data.outerMax3;
    outerMin1.value=response.data.data.outerMin1;
    outerMin2.value=response.data.data.outerMin2;
    outerMin3.value=response.data.data.outerMin3;
    wallThick1.value=response.data.data.wallThick1;
    wallThick2.value=response.data.data.wallThick2;
    wallThick3.value=response.data.data.wallThick3;
    initDefect1.value=response.data.data.initDefect1;
    initDefect2.value=response.data.data.initDefect2;
    initDefect3.value=response.data.data.initDefect3;
    avelength.value=response.data.data.avelength;
    aveoutermax.value=response.data.data.aveoutermax;
    avewallThick.value=response.data.data.avewallthick;
    aveinitdefect.value=response.data.data.aveinitdefect;
    aveoutermin.value=response.data.data.aveoutermin;
    const outerMax = parseFloat(aveoutermax.value);
    const outerMin = parseFloat(aveoutermin.value);
    const length = parseFloat(avelength.value);
    const wallThick = parseFloat(avewallThick.value);
    d = (outerMax + outerMin) / 2;
    console.log("d:", d);

    if (length > 1.17 * d * Math.sqrt(d / wallThick)) {
      p = 2.2 * 100000 * (wallThick / d) ** 3;
      p = p.toFixed(3);
      console.log("p:", p);
    } else {
      p = 2.59 * 100000 * wallThick ** 2 / (length * d * Math.sqrt(d / wallThick));
      p = p.toFixed(3);
      console.log("p:", p);
    }
    n =  Math.pow(7.06*d/wallThick, 1/4)/ Math.pow(length/d, 1/2);
    n = Math.round(n);
    // console.log(response.data)
  } else {
    alert(response.data.msg);
  }
}

const waiyaCompute = ()=>{
   axios.post('/api/waiya/compute', {
      length: avelength.value,
      outerMax: aveoutermax.value,
      outerMin: aveoutermin.value,
      wallThick: avewallThick.value,
      initDefect: aveinitdefect.value,
      stress: press.value,
    }).then((response) => {
      updateChart();
      if (response.data.code === 1) {
        console.log("压力：",press.value)
        } else {
        alert(response.data.msg);
        }
    })
}



const shiwen =()=>{
    axios.get('/api/waiya/shiwen')
            .then((response) => {
              // 处理响应数据
              console.log("压力：",press.value)
              console.log("shiwen ,response.data:",response.data);
              if (response.data.code === 1) {
                shiwenImageUrl.value=baseUrl3 + response.data.data;
                console.log(response.data.data);
               console.log(shiwenImageUrl.value);
            } else {
              alert(response.data.msg);
            }
            })
            .catch((error) => {
              console.error('获取图像失败', error);
            });
    }
     // 发起 GET 请求获取图像
const getMoTai = ()=>{
  axios.get('/api/waiya/motai')
        .then((response) => {
          // 处理响应数据
          console.log("motai ,response.data:",response.data);
          if (response.data.code === 1) {
            motaiImageUrl.value= baseUrl3 + response.data.data;
            console.log(motaiImageUrl.value);
        } else {
          alert(response.data.msg);
        }

        })
        .catch((error) => {
          console.error('获取图像失败', error);
        });
}

// #3
getWaiyaRandomParams().then(waiyaCompute);
getMoTai();
shiwen();


const startwaiya = ()=>{
    // #3 24240818
    getWaiyaParams().then();
    axios.post('/api/student/stuStartWaiyaExp', { stuNo: stuNo })
    .then((response) => {
        // 处理响应数据
        if (response.data.code === 1) {
          flag.value = 1;
        console.log(response.data);
        alert('请开始实验');
        } else {
        alert(response.data.msg);
        }
    })
    .catch((error) => {
        console.error('开启实验失败', error);
    });
}

//下载实验数据
const downloadFile = async ()=>{
   await axios.get('/api/waiya/data')
        .then((response) => {
          // 处理响应数据
    const blob = new Blob([response.data], { type: response.headers['content-type'] });
      // 发起下载文件请求
      const url = window.URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
    // 创建一个 <a> 元素
    // 设置下载属性和文件名
    a.download = '外压实验数据.zip';

    // 模拟点击 <a> 元素
    a.click();
    })
    .catch((error) => {
      console.error('下载实验数据失败', error);
    });
}

let _pressValue = [];

/**
 * 更新echart数据
 * @param pressValue
 * @returns {boolean}
 */
function updateChartData(pressValue) {
  // 重置标记
  let _flag = true;

  // 如果出现重复数据，说明是下一次循环，清空数组，重置
  if (_pressValue.includes(pressValue) && !flag.value) {
    _pressValue = []
    chartData = [];
    _flag = false;
  }

  // 否则加入当前值
  _pressValue.push(pressValue);

  // 取出y表中最接近传入值的y
  let _maxIndex = 0;
  for (const i in yAxisData) {
    if (yAxisData[i] <= pressValue) {
      _maxIndex = i;
    }
  }

  // 加入当前结点
  chartData.push({ x: xAxisData[_maxIndex], y: yAxisData[_maxIndex], symbol: 'pin' });
  // 返回标签
  return _flag;
}

const options = {
  grid: {
    left: '15%',
  },
  // title: {
  //   text: "载荷---位移曲线",
  //   left: "center",
  // },
  xAxis: {
    type: 'value',
    name: '位移（mm）',
    nameGap: 50,
    nameLocation:'center',
    axisLabel: {
      rotate:45
    }
  },
  yAxis: {
    type: 'value',
    name: '载荷（MPa）',
    nameGap: 20,
    // nameLocation:'center'
  },
  tooltip: {
    trigger: "axis"
  },
  series: [
    {
      type: 'line',
      smooth: true,
      data: chartData.map(data => [data.x.toFixed(6), data.y.toFixed(6)]),
    }
  ]
};

// 更新 press 值并重新渲染图表
function updateChart() {
  const lastPressValue = pressValues[pressValues.length - 1];
  const updated = updateChartData(lastPressValue);
  console.log("updated:",updated)
  options.series[0].data = chartData.map(data => [data.x.toFixed(6), data.y.toFixed(6)]),
  lineChart.setOption(options);
}


// 模拟 press 值更新，并重新渲染图表
// function simulatePressUpdate() {
//   if(flag.value){
//     const newPressValue = pressValues[pressValues.length - 1]+0.011; // 获取到的新的 press 值
//   // console.log(newPressValue)
//     pressValues.push(newPressValue); // 添加新的 press 值
//     updateChart();
//   }

// }

// setInterval(simulatePressUpdate, 2000);

if(!flag.value) {
  watch(press, async (newValue, oldValue) => {

    pressValues.push(newValue);
    await waiyaCompute();
    shiwen();
    getMoTai();
    console.log('press值变化了，新值为：', newValue, '旧值为：', oldValue);
  });
}
else{
  watch(press, async (newValue, oldValue) => {

    pressValues.push(newValue);
    await waiyaCompute1();
    shiwen();
    getMoTai();
    console.log('press值变化了，新值为：', newValue, '旧值为：', oldValue);
  });
}
/**
 * #1 #2
 * 实验状态
 * @type {boolean}
 */
let expStatus = ref(false);
//console.log("试验状态：",expStatus.value)

onMounted(() => {
  // 设置定时器，检测实验状态 #1 #2
  setInterval(() => {
    if (!expStatus.value){
      axios.get('/api/student/getWaiyaStatus?stuNo=' + stuNo).then((response) => {
        // 当状态已开始时，更新引用变量
        if (response.data.data === true) {
          expStatus.value = true;
          console.log(response.data.data);
        }
        else{
          console.log("1111",response.data.data)
        }
      });
    }
  }, 5000)

  getWaiyaParams();
  lineChart = echarts.init(document.getElementById("avi"), "purple-passion");
  updateChart();
});

onUnmounted(() => {
  lineChart.dispose;
});

</script>
<template>
    <div class="page1">
      <div class="left-vedio">
        <div class="page-vedio flex-base-page">
    <div class="first-vedio flex-base-vedio">
        <div class="first-vedio-left">
          <div class="block text-center" m="t-4">
            <span class="demonstration">实验步骤展示</span>
            <el-carousel trigger="click" height="270px">
              <el-carousel-item v-for="item in 4" :key="item">
                <!-- <h3 class="small justify-center" text="2xl">{{ item }}</h3> -->
                <img :src="'http://115.24.173.26:8002/DigitalTwinPic/step/waiya/' + item + '.jpg'" style="width: 100%; height: 100%;">
              </el-carousel-item>
            </el-carousel>
          </div>

        </div>
    </div>
    <div class="pic1 flex-base">
        <div class="pic1-left">
          <img :src="shiwenImageUrl" class="image">
        </div>
        <div class="pic1-right flex-title">
          试件变形图
        </div>
    </div>
    <div class="pic2 flex-base">
        <div class="pic2-left" id="avi">
          <!-- <video controls :src="zaiheImageUrl" width="100%" height="100%" id="playvedio">
               <source />
          </video>     -->
        </div>
        <div class="pic2-right flex-title">
          载荷一位移曲线
        </div>
    </div>
</div>
      </div>
      <div class="right-control flex-base-righ">
            <div class="righttop flex-row">
               <div class="top-left flex-collum">
                  <div class="top-left1 top-left-font flex-row">
                    得到试件参数
                  </div>
                  <div class="top-left2">
                    <table>
                        <tr>
                            <td>次数</td><td>长度L</td><td>外径DoMax</td><td>外径DoMin</td><td>壁厚</td><td>初始缺陷</td>
                        </tr>
                        <tr>
                            <td>1</td><td>{{ length1 }}</td><td>{{ outerMax1 }}</td><td>{{ outerMin1 }}</td><td>{{ wallThick1 }}</td><td>{{ initDefect1 }}</td>
                        </tr>
                        <tr>
                            <td>2</td><td>{{ length2 }}</td><td>{{ outerMax2 }}</td><td>{{ outerMin2 }}</td><td>{{ wallThick2 }}</td><td>{{ initDefect2 }}</td>
                        </tr>
                        <tr>
                            <td>3</td><td>{{ length3 }}</td><td>{{ outerMax3 }}</td><td>{{ outerMin3 }}</td><td>{{ wallThick3 }}</td><td>{{ initDefect3 }}</td>
                        </tr>
                        <tr>
                            <td>平均值</td><td>{{ avelength }}</td><td>{{ aveoutermax }}</td><td>{{ aveoutermin }}</td><td>{{ avewallThick }}</td><td>{{ aveinitdefect }}</td>
                        </tr>
                    </table>
                  </div>
                  <div class="top-left3 top-left-font flex-row">
                    理论计算值
                  </div>
                  <div class="top-left4">
                    <table class="top-left4-table">
                        <tr class="top-left4-tr">
                            <td class="top-left4-td">临界压力</td><td class="top-left4-td">失稳波数</td>
                        </tr>
                        <tr class="top-left4-tr">
                            <td class="top-left4-td">{{ p }}</td><td class="top-left4-td">{{ n }}</td>
                        </tr>
                    </table>
                  </div>
               </div>
               <div class="top-right flex-collum">
                <div class="top-right1">
                  <img :src="motaiImageUrl" class="image">
                </div>
                <div class="top-right2 top-left-font flex-collum">
                   试件失稳模态图
                </div>
               </div>
            </div>
          <div class="rightlow flex-row">
            <div class="bg1 flex-collum">
              <div class="bg1-box1 flex-collum">
                <button v-if="expStatus" class="my-button1-disable" @click="startwaiya">实验开始</button>
                <button v-if="!expStatus" class="my-button1" disabled>实验开始</button>
                <div class="bg1-box1-text">先关闭缓冲罐阀门，给试压容器加压</div>
              </div>
              <div class="bg1-box2 flex-collum">
                <div class="bg1-box2-text">打开缓冲罐阀门，系统卸载，取出试件，观察试件失稳情况</div>
            </div>
          </div>
          <div class="bg2 flex-collum">
            <div class="boxtop flex-collum">
                <div class="boxtop1 flex-row">
                    实验室传感器显示
                </div>
                <div class="boxtop2 flex-row">
                    压力： {{ press }} MPa<br>
                </div>
                <div class="boxtop2 flex-row">
                    Max： {{ maxPress }} MPa
                </div>
            </div>



            <div>
              <button v-if="expStatus" class="my-button2-disable" @click="downloadFile">下载实验数据</button>
              <button v-if="!expStatus" class="my-button2" disabled>下载实验数据</button>
            </div>


        </div>
        </div>
        </div>
    </div>
  </template>

<style scoped>
.demonstration {
  color: black;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 270px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.page1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 922px;
  }
.left-vedio {
    width: 526px;
    height: 922px;
  }
.right-control {
    display: flex;
    flex-direction: column;
    width: 786px;
    height: 922px;

  }
.top-left {
    height: 100%;
    width: 470px;
  }
.top-left-font {
    font-size: 24px;
    color: black;
  }
.top-left1 {
    width: 156px;
    height: 38px;
    border: 1px solid #808080;
    margin-top: 30px;
  }
.top-left2 {
    width: 465px;
    height: 265px;
    margin-top: 12px;
  }
.top-left3 {
    width: 128px;
    height: 35px;
    margin-top: 30px;
  }
.top-left4 {
    width: 290px;
    height: 88px;
    margin-top: 20px;
  }
.top-left4-table{
    width: 290px;
    height: 88px;
    border-collapse: collapse;
  }
.top-left4-tr {
    height: 44px;
  }
.top-left4-td {
    border: 1px solid #808080;
    font-size: 20px;
    justify-content: center;
    color: black;
    width: 145px;
  }
table {
  width: 465x;
  height: 265px;
  border-collapse: collapse;
}
tr {
  height: 53px; /* 设置行高为40像素 */
}
td {
  border: 1px solid #808080;
  font-size: 20px;
  /* text-align: center; */
  justify-content: center;
  color: black;
  width: 77px;
}
.top-right {
    width: 320px;
    height: 100%;
}
.top-right1{
  width: 300px;
  height: 230px;
  border: 1px solid #808080;
  margin-top: 50px;
}
.top-right2 {
  width: 200px;
  height: 80px;
}
.flex-row {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .flex-collum {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .righttop{
    width: 100%;
    height: 490px;
  }
  .boxtop{
    margin-top:7px;
    left: 994px;
    top: 641px;
    width: 237px;
    height: 145px;
    line-height: 20px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    font-family: Roboto;
    border: 1px solid rgba(187, 187, 187, 1);

  }
  .boxtop1{
    display: flex;
    justify-content: center; /* 在主轴上居中对齐 */
    align-items: center; /* 在交叉轴上居中对齐 */
    flex-direction: column;
    width: 200px; /* 设置框的宽度 */
    height: 40px; /* 设置框的高度 */
    /* background-color: #b76d6d;  */
    color: rgba(16, 16, 16, 1);
    font-size: 18px;
    text-align: left;
    font-family: SourceHanSansSC;
    font-weight: 600;
  }
  .boxtop2{
    display: flex;
    align-items: center; /* 在交叉轴上居中对齐 */
    flex-direction: column;
    width: 200px; /* 设置框的宽度 */
    height: 40px; /* 设置框的高度 */
    /* background-color: #f31bd3;  */
    color: rgba(16, 16, 16, 1);
    font-size: 22px;
    text-align: left;
    font-family: SourceHanSansSC;
    font-weight: 2000;
  }

  .rightlow
  {
    width: 100%;
    height: 390px;
  }

  .bg1 {
    width: 340px;
    height: 300px;
    padding: 10px;
  }
  .bg1-box1{
    width: 270px;
    height: 130px;
    line-height: 26px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 18px;
    text-align: center;
    font-family: Roboto;
    border: 1px solid rgba(187, 187, 187, 1);
  }
  .bg1-box1-text{
    left: 664px;
    top: 679px;
    width: 222px;
    height: 66px;
    color: rgba(16, 16, 16, 1);
    font-size: 22px;
    text-align: justify;
    font-family: SourceHanSansSC-regular;
    display: flex;
    justify-content: center; /* 在主轴上居中对齐 */
    align-items: center; /* 在交叉轴上居中对齐 */
    flex-direction: column;
  }
  .bg1-box2{

    width: 270px;
    height: 170px;
    line-height: 26px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 18px;
    text-align: center;
    font-family: Roboto;
    border: 1px solid rgba(187, 187, 187, 1);
  }
  .bg1-box2-text{
    left: 657px;
    top: 824px;
    width: 246px;
    height: 106px;
    color: rgba(16, 16, 16, 1);
    font-size: 22px;
    text-align: justify;
    font-family: SourceHanSansSC-regular;
    display: flex;
    justify-content: center; /* 在主轴上居中对齐 */
    align-items: center; /* 在交叉轴上居中对齐 */
    flex-direction: column;
  }
  .bg2{
    width: 340px;
    height: 300px;
    padding: 10px;
  }
  .my-button2{
    margin-top: 50px;
    width: 183px;
    height: 44px;
    border-radius: 4px;
    background-color: rgba(232, 232, 232, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 22px;
    text-align: center;
    font-family: Microsoft Yahei;
    border: 1px solid rgba(187, 187, 187, 1);

  }
  .my-button2-disable{
    margin-top: 50px;
    width: 183px;
    height: 44px;
    border-radius: 4px;
    background-color:#4f4f64;
    color: rgba(16, 16, 16, 1);
    font-size: 22px;
    text-align: center;
    font-family: Microsoft Yahei;
    border: 1px solid rgba(187, 187, 187, 1);

  }

  .box-p {
    text-align: left;
    font-size: 16px; /* 设置字体大小 */
    font-weight: bold;

  }

  .my-button1 {
    left: 725px;
    top: 635px;
    width: 115px;
    height: 44px;
    border-radius: 4px;
    background-color: rgba(232, 232, 232, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 22px;
    text-align: center;
    font-family: Microsoft Yahei;
    border: 1px solid rgba(187, 187, 187, 1);
    cursor: pointer;
  }

  .my-button1-disable {
    left: 725px;
    top: 635px;
    width: 115px;
    height: 44px;
    border-radius: 4px;
    background-color: #4f4f64;
    color: rgba(16, 16, 16, 1);
    font-size: 22px;
    text-align: center;
    font-family: Microsoft Yahei;
    border: 1px solid rgba(187, 187, 187, 1);

  }

  .image {
  width: 100%; /* 图像宽度与外层盒子宽度一致 */
  height: 100%; /* 图像高度与外层盒子高度一致 */
  object-fit: cover; /* 调整图像以填充整个图像框 */
}

 /* //vedioex.vue的样式 */

.plugin{
  width: 100%;
  height: 100%;
}
.page-vedio {
    height: 100%;
    width: 526px;
}
.flex-base-page {
    display: flex;
    flex-direction: column;
}
.flex-base {
    display: flex;
    /* justify-content: center;
    align-items: center; */
    flex-direction: row;
}
.flex-title-first{
  display: flex;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  writing-mode: vertical-rl;
  font-size: 18px;
  letter-spacing: 10px;
}
.flex-title{
  display: flex;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  writing-mode: vertical-rl;
  font-size: 20px;
  letter-spacing: 5px;
}
.flex-base-vedio {
    display: flex;
    /* justify-content: center;
    align-items: center; */
}
.first-vedio {
    width: 100%;
    height: 276px;
    margin-left:25px;
    margin-top:25px;
}
.first-vedio-left {
    width: 400px;
    height: 270px;
}
.first-vedio-right{
  width: 66px;
  height: 235px;
  border: 1px solid #808080;
  margin-left:7px;
  margin-top:40px;
}
.pic1 {
    width: 100%;
    height: 310px;
    margin-left: 25px;
    margin-top: 30px;
}
.pic1-left {
  width: 315px;
  height: 220px;
  border: 1px solid #808080;
  /* background-image: url('/src/'); */
  background-size: cover; /* 保持图片比例并覆盖整个 div */
  background-repeat: no-repeat; /* 不重复背景图片 */
}
.pic1-right {
  width: 72px;
  height: 220px;
}
.pic2 {
    width: 100%;
    height: 310px;
    margin-top:-30px;
    margin-left: 25px;
}
.pic2-left {
  width: 315px;
  height: 220px;
  border: 1px solid #808080;
  background-size: cover; /* 保持图片比例并覆盖整个 div */
  background-repeat: no-repeat; /* 不重复背景图片 */
}
.pic2-right {
  width: 72px;
  height: 220px;
}
.image {
  width: 100%; /* 图像宽度与外层盒子宽度一致 */
  height: 100%; /* 图像高度与外层盒子高度一致 */
  object-fit: cover; /* 调整图像以填充整个图像框 */
}



  </style>
